<script setup>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const valueHtml = ref(
  `${city}城市人民防空基本方案主要分析判断敌未来空袭可能出现的情况，我城市防空袭的主要任务、行动指导、力量运用、行动要点、指挥协同、相关保障，以及能力需求和战备要求等事项，是未来组织城市人民防空行动的基本依据。`
);
const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-引言" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "情况判断结论引言")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-引言",
      data: [
        {
          k: "情况判断结论引言",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div style="border: 1px solid #ccc" class="top-15">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <div class="flex-justify-end top-20">
    <el-button type="primary" class="save-btn" @click="saveProgramme"
      >保存</el-button
    >
  </div>
</template>
<style scoped lang="scss"></style>
